<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<% String appPath = request.getContextPath();%>

<script type="text/javascript">
 	var appPath = "<%=appPath%>";
</script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" >
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/common/common.js"></script>

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>查询页面</title>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#nextPage").click(nextPage);
		$("#nextPageBtn").click(nextPageBtn);
		$("#queryBtn").click(queryData);
		
	});
		
	function queryData() {
		var jsonData = bfTec_getFormData("queryForm");
		
		jsonData["pageNo"] = 1;
		jsonData["pageSize"] = 10;
		
		bfTec_ajax({
			url : appPath+'/queryPerson/queryListData',	
			type : 'POST',
			dataType : "json",
			data: {"data" : JSON.stringify(jsonData)},
			async: true,
			success: function(data){
				$("#listData").html(data.htmlData);
				$("#_dataCount").val(data._dataCount);
				$("#pageSize").val(data.pageSize);
				$("#pageNo").val(data.pageNo);
				
				$("#curPage").html("第" + $("#pageNo").val() + "/" + Math.ceil(data._dataCount/10) + "页");
				
				$("#mainGrid").show(100);
				
				if((parseInt( $("#pageNo").val()) + 1) > Math.ceil(data._dataCount/10)) {
					$("#nextPageBtn").hide();
				} else {
					$("#nextPageBtn").show();
				}
				
			}
		});
	}
	
	function nextPageBtn() {
		var jsonData = bfTec_getFormData("queryForm");
		
		jsonData["pageNo"] = (parseInt( $("#pageNo").val()) + 1);
		jsonData["pageSize"] = 10;
		
		bfTec_ajax({
			url : appPath+'/queryPerson/queryListData',	
			type : 'POST',
			dataType : "json",
			data: {"data" : JSON.stringify(jsonData)},
			async: true,
			success: function(data){
				$("#listData").html($("#listData").html() + data.htmlData);
				$("#_dataCount").val(data._dataCount);
				$("#pageSize").val(data.pageSize);
				$("#pageNo").val(data.pageNo);
				
				$("#curPage").html("第" + $("#pageNo").val() + "/" + Math.ceil(data._dataCount/10) + "页");
				
				if((parseInt( $("#pageNo").val()) + 1) > Math.ceil(data._dataCount/10)) {
					$("#nextPageBtn").hide();
				} else {
					$("#nextPageBtn").show();
				}
			}
		});
	}
	
	function nextPage() {
		var jsonData = bfTec_getFormData("queryForm");
		
		jsonData["pageNo"] = (parseInt( $("#pageNo").val()) + 1);
		jsonData["pageSize"] = 10;
		
		bfTec_ajax({
			url : appPath+'/queryPerson/queryListData',	
			type : 'POST',
			dataType : "json",
			data: {"data" : JSON.stringify(jsonData)},
			async: true,
			success: function(data){
				$("#listData").html(data.htmlData);
				$("#_dataCount").val(data._dataCount);
				$("#pageSize").val(data.pageSize);
				$("#pageNo").val(data.pageNo);
				
				$("#curPage").html("第" + $("#pageNo").val() + "/" + Math.ceil(data._dataCount/10) + "页");
			}
		});
	}

	</script>
	</head>
	
	<body>
	<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
		<h1 class="ui-title" role="heading" aria-level="1">健康卡查询系统</h1>
		<a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Back</a>
		<a href="<%= request.getContextPath() %>/home" class="ui-btn-right ui-btn ui-icon-home ui-btn-icon-left ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">首页</a>
	</div>
	<!-- 
	<div class="ui-grid-d center">
	    <div class="ui-block-a"><a href="javascript:history.go(-1)" class="ui-btn ui-shadow ui-corner-all ui-icon-back ui-btn-icon-notext ui-btn-inline" id="backMenuBtn">Back</a>
	    </div>
	    <div class="ui-block-b"><a href="<%= request.getContextPath() %>/home" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline" id="homeMenuBtn">Home</a>
	    </div>
	    <div class="ui-block-c"><a href="<%= request.getContextPath() %>/queryPerson" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext ui-btn-inline" id="searchMenuBtn">Minus</a>
	    </div>
	    <div class="ui-block-d"><a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-info ui-btn-icon-notext ui-btn-inline" id="infoMenuBtn">Minus</a>
	    </div>
	</div>
	
	<a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-back">返回</a>
	<a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-search">查询</a>
	<a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-back">返回</a>
	 -->
	<form id="queryForm" >
		<input id="XM" name="XM" placeholder="请输入姓名" value="" type="search" >
		<input id="JKZBH" name="JKZBH" placeholder="请输入健康证编号" value="" type="search" >       
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">    
				<input id="radio-choice-c" name="XB" value="男" type="radio">        
				<label for="radio-choice-c">男</label>        
				<input id="radio-choice-d" name="XB" value="女" type="radio">        
				<label for="radio-choice-d">女</label>        
			</fieldset>
		<a id='queryBtn' class="ui-btn ui-corner-all ui-shadow ui-btn-b">查询</a>
	</form>
	
	<form id="mainGrid" style="display: none;">
		<div data-demo-html="true" >
		<ul class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" id = "listData">
			<li class="ui-li-has-thumb ui-first-child">
				<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">
					<img src="<%= request.getContextPath() %>/imgs/person/P1.jpg" >
					<h2>张敬新</h2>
					<p>男，1986年9月生，家庭地址：方山镇虎小区</p>
				</a>
			</li>
			<li class="ui-li-has-thumb ui-first-child">
				<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">
					<img src="<%= request.getContextPath() %>/imgs/person/P2.jpg">
					<h2>张小微</h2>
					<p>女，1986年9月生，家庭地址：方山镇虎小区</p>
				</a>
			</li>
			<li class="ui-li-has-thumb ui-first-child">
				<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="detail.html">
					<img src="<%= request.getContextPath() %>/imgs/person/P1.jpg">
				<h2>张敬新</h2>
				<p>男，1986年9月生，家庭地址：方山镇虎小区</p></a>
			</li>
		</ul>
		</div>
		
		<!-- 翻页功能 -->
		<div data-role="controlgroup" data-type="horizontal" style="display:none">
		  <a href="#" data-role="button" class="ui-state-disabled" id="lastPage">上一页</a>
		  <a href="#" data-role="button" id="curPage">第1/100页</a>
		  <a href="#" data-role="button" id="nextPage">下一页</a>
		</div>
		<div style="display:none">
			<input id="_dataCount" type="hidden"/>
			<input id="pageSize" type="hidden"/>
			<input id="pageNo" type="hidden"/>
		</div>
		
		<a id='nextPageBtn' class="ui-btn ui-corner-all">点击加载更多</a>
		
	</form>

</body>
</html>